	page{
		// background: $page-color-base;
		background: #FFFFFF;
		padding-bottom: 160upx;
	}
	.icon-you{
		font-size: $font-base + 2upx;
		color: #888;
	}
	.container{
		background-color: #FFFFFF;
	}
	.box{
		height: 317upx;
		width: 750upx;
		position: relative;
		// justify-content: space-between;
		display: flex;
		align-items: center;
		justify-content: center;
		// border: 1px solid blue;
		&>image{
			position: absolute;
			width: 750upx;
		}
		.integral{
			position: absolute;
			left: calc(50% - 122.5upx);
			top: 170upx;
			width: 245upx;
			height: 107upx;
			text-align: center;
			// display: flex;
			// 用了那个强制换行排列，下面这两个的效果就反过来了
			// flex-direction: column;// 强制换行排列
			// align-items: center;// 控制上中下
			// justify-content: space-between;// 控制左中右
			// margin: auto;
			&>view{
				// border: 1px solid red;
				display: flex;
				justify-content: center;
				align-items: center;// 控制上中下
				color: #FFFFFF;
				// color: #303133;
				font-size:$font-base + 24upx;
				&>text{
					margin-left: 5upx;
					margin-right: 5upx;
				}
				// font-weight: bold;
				&>image{
					width: 28upx;
					height: 32upx;
				}
			}
			.available{
				font-size:$font-base + 4upx !important;
				display: flex;
				justify-content: center;
				align-items: center;// 控制上中下
			}
			
		}
	}
	.zone{
		background-color: #faf2f5;
		.lottery{
			height: 120upx;
			background-color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30upx;
			&>text{
				display: flex;
				font-size: $font-base + 6upx;
				font-weight: bold;
			}
			.lottery-right{
				width: 270upx;
				height: 62upx;
				background-color: #ffad01;
				color: #FFFFFF;
				font-size: $font-base + 2upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30upx;
				border-radius: 30upx;
				&>image {
					width: 15upx;
					height: 25upx;
				}
			}
		}
		.zone-box{
			margin: 20upx auto;
			background-color: #FFFFFF;
			&>view{
				padding-top: 50upx;
				margin:0upx 30upx auto;
				display: flex;
				font-size: $font-base + 6upx;
				&>text{
					font-weight: bold;
				}
			}
			.zone-content{
				display: flex;
				&>view{
					width: 700upx;
					height: 205upx;
					background-color: #FFFFFF;
					border-radius: 20upx;
					box-shadow: 0 0 10px #f6f6f6; 
					border:1px solid #f6f6f6;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 12upx;
					&>image{
						width: 178upx;
						height: 188upx;
					}
					&>view{
						width: 446upx;
						&>view{
							color: #de5c8a;
							display: flex;
							// justify-content: space-between;
							// align-items: center;
							// flex-direction: column;
							
							&>text{
								font-weight: bold;
							}
							&>button{
								width: 134upx;
								height: 62upx;
								background-color: #de5c8a;
								border-radius: 30upx;
								margin-left: 160upx;
							}
						}
					}
				}
			}
		}
	}
	
	